<template>
  <div class="tags-middle">
    <div class="tags-li pb20 mb30">
      <div class="tags pr20"
        @click="tagChange(item.tag_id, item.tag_name)"
        v-for="item in tagsArray"
        :class="{active: tagsCurrent === item.tag_name }"
        :key="item.tag_id">
        {{item.tag_name}}
      </div>
    </div>
    <div class="post-li" v-for="item in postsArray" :key="item.tag_id">
      <div class="post-li-title">
        {{item.title}}
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Tags',
  data(){
    return {
      // 标签数组
      tagsArray: [],
      // 博客数组
      postsArray: [],
      // 当前选中标签标志位
      tagsCurrent: ''
    }
  },
  mounted() {
    // 获取初始化数据
    this.getInitInfo()
    this.tagChange()
  },
  methods: {
    getInitInfo() {
      this.$post('/post-tags')
        .then((response) => {
          this.tagsArray = response.data
        })
    },
    // tag切换
    tagChange(id, name) {
      let data = {}
      if(id && name) {
        data = {
          tag_id: id,
          tag_name: name
        }
        this.tagsCurrent = name
      }
      this.$post('/post-index', data)
        .then((response) => {
          this.postsArray = response.data
          // console.log(response.data)
        })
    }
  }
}
</script>

<style lang="less" scoped>
  .tags-middle{
    width: 100%;
    min-height: 576px;
    .tags-li{
      width: 100%;
      .tags{
        line-height: 23px;
        opacity: 0.7;
        display: inline-block;
        // padding-right: 20px;
      }
      .tags:hover{
        color: #000000;
        cursor: pointer;
      }
    }
    .post-li{
      width: 100%;
      min-height: 40px;
      border-bottom: 1px solid #cccccc;
      margin-top: 10px;
      .post-li-title{
        cursor: pointer;

      }
    }
  }
</style>

